<template>
  <ModalPolygon>
    <AreaThreeComponentsLeft :query="query"></AreaThreeComponentsLeft>
    <AreaThreeComponentsMapCen :query="query"></AreaThreeComponentsMapCen>
    <AreaThreeComponentsRight :query="query"></AreaThreeComponentsRight>
  </ModalPolygon>
</template>

<script>
import ModalPolygon from '@/components/ModalPolygon/ModalPolygon'
import AreaThreeComponentsLeft from './AreaThreeComponents/AreaThreeComponentsLeft'
import AreaThreeComponentsMapCen from './AreaThreeComponents/AreaThreeComponentsMapCen'
import AreaThreeComponentsRight from './AreaThreeComponents/AreaThreeComponentsRight'

export default {
  name: 'AreaThreeComponents',
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  components: {
    ModalPolygon,
    AreaThreeComponentsLeft,
    AreaThreeComponentsMapCen,
    AreaThreeComponentsRight
  },
  data () {
    return {
      query: []
    }
  },
  created () {
    this.getParams()
  },
  methods: {
    getParams () {
      let query = this.$route.query
      this.query = query
    }
  },
  watch: {
    $route: 'getParams'
  }
}
</script>

<style lang="scss" scoped>
.yantan {
}
</style>
